<template>
  <view class="content" :style="{ paddingTop: statusBarHeight + 'px' }">
    <uni-nav-bar title="销售订单报表" fixed :border="false" height="88rpx" background-color="#f7f7f7" left-icon="left"
      @clickLeft="onClickLeft"></uni-nav-bar>
    <!-- <view class="topTag">
      <uni-search-bar v-model="name" radius="100" placeholder="请输入名称或一维码" cancelButton="none"
        style="flex: 1; margin: 0; padding: 0; margin-right: 20rpx" @confirm="searchFn" @clear="clearFn" />
    </view> -->
    <view class="topTag">
      <view class="stateBox">
        <view>日期：</view>
        <uni-datetime-picker v-model="time" type="daterange" @change="maskClick" start-placeholder="开始"
          end-placeholder="结束" />
      </view>
    </view>
    <!-- <view class="topTag">
      <view class="stateBox">
        <view>类型：</view>
        <uni-data-select v-model="type" :localdata="rangeType" @change="changeType" :clear="false"></uni-data-select>
      </view>
      <view class="stateBox">
        <view>排序：</view>
        <uni-data-select v-model="sellFilter" :localdata="rangeSort" @change="changeSort" :clear="false">
        </uni-data-select>
      </view>
    </view> -->
    <view class="uni-container">
      <view style="height: 1000rpx">
        <zb-table :show-header="true" :columns="column" :fit="false" :show-summary="true" :summary-method="getSummaries"
          :border="true" :data="tableData" @custom="(e) => { $navTo('./salesOrderDetail', { id: e.id }) }"></zb-table>
      </view>
      <view class="uni-pagination-box"><uni-pagination show-icon :page-size="page.pageSize" :current="page.pageNum"
          :total="page.total" @change="changePage" /></view>
    </view>
  </view>
</template>

<script>
import dayjs from 'dayjs';
import { reqSalesOrderList } from '@/apis/member.js'
export default {
  name: 'InventoryInfo',
  data() {
    return {
      time: [],
      rangeType: [
        { value: '0', text: '标品' },
        { value: '1', text: '非标品' },
        { value: '2', text: '自营' },
        { value: '3', text: '临时' }
      ],
      rangeSort: [
        { value: '0', text: '数量从大到小' },
        { value: '1', text: '数量从小到大' },
        { value: '2', text: '金额从大到小' },
        { value: '3', text: '金额从小到大' },
        { value: '4', text: '毛利从大到小' },
        { value: '5', text: '毛利从小到大' }
      ],
      type: '0',
      name: '',
      sellFilter: '0',
      page: {
        pageNum: 1,
        pageSize: 15,
        total: 0
      },
      tableData: [],
      maxDate: '',
      minDate: '',
      triggered: false, // 是否触发下拉刷新
      loading: false, // 是否触发上拉加载
      allDataArr: {},
      column: [
        { name: 'id', type: 'index', label: '序号', width: 80, align: 'center' },
        { name: 'orderNum', label: '订单编号', align: 'center', width: 180 },
        { name: 'orderAmount', label: '订单金额', align: 'center' },
        { name: 'erpProfit', label: '供应链货款', align: 'center' },
        { name: 'storeProfit', label: '门店货款', align: 'center' },
        { name: 'storeOrderProfit', label: '门店利润', align: 'center' },
        { name: 'fee', label: '手续费', align: 'center' },
        { name: 'discountMoney', label: '整单优惠金额', align: 'center', width: 130 },
        { name: 'orderMethods', label: '下单方式', align: 'center' },
        { name: 'payTime', label: '订单时间', align: 'center', width: 150 },
        {
          name: 'operation', type: 'operation', label: '操作', align: 'center', renders: [
            {
              name: '详情',
              type: "primary", // type 为custom的时候自定义按钮
              class: "custom",
              func: 'custom'
            },

          ]
        },
      ],
      fieldSort: ['id', 'orderNum', 'orderAmount', 'erpProfit', "storeProfit", "storeOrderProfit", "fee", 'discountMoney', 'orderMethods', "payTime", "operation"],
    }
  },
  onLoad() {
    let t1 = dayjs().format('YYYY-MM-DD');
    this.time = [t1, t1]
    this.minDate = t1
    this.maxDate = t1
    this.reqSalesOrderList()
  },
  onShow() {

  },
  methods: {
    // 供应链
    async reqSalesOrderList() {
      const res = await reqSalesOrderList({
        ...this.page,
        minDate: this.minDate,
        maxDate: this.maxDate,
      })
      if (res.code === 200) {
        console.log('销售报表:', res.data)
        this.tableData = res.data.pageInfo.list.map(item => {
          return {
            ...item,
            orderMethods: item.orderMethods == '0' ? '扫码支付' : '现金支付',
            payTime: dayjs(item.payTime).format('YYYY-MM-DD HH:mm:ss')
          }
        })
        let allCountObj = {
          erpProfit: res.data.erpProfit,
          fee: res.data.fee,
          discountMoney: res.data.discountMoney,
          orderAmount: res.data.orderAmount,
          storeProfit: res.data.storeProfit,
          storeOrderProfit: res.data.storeOrderProfit,
        };
        this.allDataArr = allCountObj;
        this.page.total = res.data.pageInfo.total
        this.loading = false
      }
    },
    maskClick(e) {
      console.log('e', e, this.time)
      this.time = e
      this.minDate = this.time.length ? this.time[0] : ''
      this.maxDate = this.time.length ? this.time[1] : ''
      this.page.pageNum = 1
      this.tableData = []
      this.loading = 'loading'
      this.reqSalesOrderList()
    },
    changeType() {
      this.page.pageNum = 1
      this.tableData = []
      this.loading = true
      this.reqSalesOrderList()
    },
    changeSort() {
      this.page.pageNum = 1
      this.tableData = []
      this.loading = true
      this.reqSalesOrderList()
    },
    changePage(e) {
      console.log('e', e)
      this.page.pageNum = e.current
      this.tableData = []
      this.loading = true
      this.reqSalesOrderList()
    },
    searchFn() {
      this.page.pageNum = 1
      this.tableData = []
      this.loading = true
      this.reqSalesOrderList()
    },
    clearFn() {
      this.page.pageNum = 1
      this.tableData = []
      this.loading = true
      this.reqSalesOrderList()
    },
    getSummaries(param) {
      // return this.allDataArr;
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价';
          return;
        }
        if (this.allDataArr[column.name]) {
          sums[index] = this.allDataArr[column.name];
        } else {
          sums[index] = '-';
        }
      });
      return sums;

    },
    custom(e) {
      console.log('11111', e);
    }
  },
}
</script>
<style>
page {
  background: #f7f7f7;
}
</style>
<style lang="scss" scoped>
.content {
  height: calc(100vh);
  background-color: #f7f7f7;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 28rpx !important;
}

view {
  box-sizing: border-box;
}

.topTag {
  height: 100rpx;
  display: flex;
  justify-content: start;
  align-items: center;
  border-bottom: 1px solid #eee;

  .stateBox {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 0 10rpx;
  }
}

.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: scroll;

  .uni-pagination-box {
    height: 100rpx;
  }
}

.uni-table-tr {
  &:first-child {
    position: sticky;
    top: 0;
    background-color: #fff;
  }
}

/* 操作列固定 */
.uni-table-th,
.uni-table-td {
  padding: 16rpx 10rpx;
}

.uni-table-td {
  line-height: 30rpx !important;
}

.uni-table-scroll {
  box-sizing: border-box;
}

.uni-group {
  display: flex;
  align-items: center;
}
</style>
